<template>
  <div class="detail-box">
    <div class="content-box w-card">
      <div class="back-box">
        <el-icon class="icon-white" size="28" color="#ffffff" @click="backHandle">
          <ArrowLeft />
        </el-icon>
      </div>
      <div class="order-box2">
        <span>订单编号</span>
        <span>{{ inconmingForm.orderId }}</span>
      </div>
      <div class="order-box">
        <div>订单详情</div>
        <el-row class="row-item">
          <el-col class="col-item" :span="12">
            <span>
              代充商户：
              <span>{{ dataForm.toShopIdName || '' }}</span>
            </span>
          </el-col>
          <el-col class="col-item" :span="12">
            <span>
              支付金额(元)：
              <span style="color:#f6a73f;">{{ numFormat(dataForm.fee/100) || '' }}</span>
            </span>
          </el-col>
        </el-row>
        <el-row class="row-item">
          <el-col class="col-item" :span="12">
            <span>
              支付时间：
              <span>{{ dataForm.chargeTime ? getDateTime(dataForm.chargeTime)[6] : '' }}</span>
            </span>
          </el-col>
          <el-col class="col-item" :span="12">
            <span>
              支付方式：
              <span>{{ dataForm.payType || '' }}</span>
            </span>
          </el-col>
        </el-row>
        <el-row class="row-item">
          <el-col class="col-item" :span="24">
            <span>
              交易流水号：
              <span>{{ dataForm.tradeNo || '' }}</span>
            </span>
          </el-col>
        </el-row>
        <el-row class="row-item">
          <el-col class="col-item" :span="24">
            <span>
              备注：
              <span>{{ dataForm.remark || '' }}</span>
            </span>
          </el-col>
        </el-row>
        <el-row class="row-item">
          <el-col class="col-item" :span="12">
            <span>
              操作人：
              <span>{{ dataForm.userName || '' }}</span>
            </span>
          </el-col>
          <el-col class="col-item" :span="12">
            <span>
              操作时间：
              <span>{{ dataForm.createTime ? getDateTime(dataForm.createTime)[6] : '' }}</span>
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { warningDeal, numFormat, getDateTime } from '@/utils/utils'
import api from './api'
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const state = reactive({
      inconmingForm: {},
      dataForm: {},
    })

    function backHandle() {
      router.go(-1)
    }

    function getOrderData() {
      const obj = {
        sysOrderId: state.inconmingForm.orderId,
      }
      api.accountChargeDetail(obj).then(res => {
        if (res.code == '200') {
          state.dataForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    onMounted(() => {
      state.inconmingForm = JSON.parse(route.query.data) || {}
      getOrderData()
    })

    return {
      ...toRefs(state),
      backHandle,
      numFormat,
      getDateTime,
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-box {
  width: 100%;
  height: 100%;
  .content-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    .back-box {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .order-box2 {
      box-sizing: border-box;
      padding: 20px;
      width: 50%;
      margin-left: 25%;
      display: flex;
      align-items: center;
      gap: 10px;
      > span {
        font-size: 16px;
      }
      > span:last-of-type {
        font-weight: bold;
      }
    }
    .order-box {
      box-sizing: border-box;
      padding: 20px;
      width: 50%;
      margin-left: 25%;
      border: 1px solid #e6e7e8;
      > div:first-of-type {
        font-size: 15px;
        font-weight: bold;
      }
      .row-item {
        padding: 10px 0;
        .col-item {
          font-size: 14px;
          > span {
            color: #626468;
            > span {
              color: #000000;
            }
          }
        }
      }
    }
  }
}
</style>